<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>transition实现选项卡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
	.transBox{
		width: 800px;
		margin: 20px auto;
		overflow: hidden;
	}
	.transImageBox{
		width: 3200px;
		height: 340px;
		transition: all 1s ease-in-out;
	}
	.transTrigger {
    	padding-top: 10px;
    	text-align: center;
	}
	.transImage {
    	width: 800px;
    	float: left;
	}
</style>
<body>
    <div class="transBox">
    	<div class="transImageBox" id="transImageBox">
    		<img src="../images/1.png" alt="" class="transImage">
    		<img src="../images/2.png" alt="" class="transImage">
    		<img src="../images/3.png" alt="" class="transImage">
    		<img src="../images/4.png" alt="" class="transImage">
    	</div>
    	<div class="transTrigger" id="transTrigger">
    		<a href="#1">图片1</a>
    		<a href="#2">图片2</a>
    		<a href="#3">图片3</a>
    		<a href="#4">图片4</a>
    	</div>
    </div>
</body>
</html>
<script>
	window.onload=function(){
		// var $ = function(id){
		// 	return document.getElementById(id);
		// };
		// var oBox = $("transImageBox");
		// 	oTrigger = $("transTrigger").getElementsByTagName("a"),
		// 	lTrigger = oTrigger.length;
		var oBox = document.getElementById("transImageBox"),
			oTrigger = document.getElementById("transTrigger").getElementsByTagName("a"),
			lTrigger = oTrigger.length;
		if (oBox && lTrigger) {
			for (var i = 0; i < oTrigger.length; i++) {
				oTrigger[i].onclick = function(){
					var index = Number(this.href.replace(/.*#/g, "")) || 1;
					oBox.style.marginLeft = (1-index)*800+"px";
					// alert(index);
					return false;
				}
			}
		}
	}
</script>